<template>
  <div>
    <Loading v-show="isLoad" :isLoad.sync="isLoad" num="2"></Loading>
    <div v-show="!isLoad">
      <search ></search>
      <div class="listWrapper">
          <!--左边-->
          <div class="leftWrapper" ref="leftWrapper">
              <ul class="wrapper">
                  <li
                      v-for="(item,index) in cateList" :key='index'
                      :class="{categoryItem:true, selected:active===index}">
                      <span @click="navClick(index,$event)" class="textWrapper">{{item.name}}</span>
                  </li>
              </ul>
          </div>
          <!--右边-->
          <div class="wrapper emptyWrapper" ref="rightWrapper">
            <Content :goodslist="cateList" />
          </div>
      </div>
    </div>
  </div>

</template>

<script>
  // 引入滚动
  import BScroll from'better-scroll'
  import Search from './components/search'
  import Content from './components/content'
  import Loading from '@/components/loading'

  // 第一种分类
  // import {getCateGoodsData} from '../../api'
  // import {getCateData} from '../../api'

  // 第二种分类
  import {getCateData} from '../../api'
  export default {
    name: 'Cate',
    components:{
      Search,
      Content,
      Loading
    },
    data() {
      return {
        cateList:[],
        goodsList:[],
        heightList:[0],
        listDom:[],// 获取右侧分类节点
        scrollY:0,
        isLoad:true,
        // active:0
      }
    },
    created() {
      this.getCateData()
      this.navClick()
      this.leftScroll()
    },
    mounted () {
      // 整个视图都被渲染之后才运行的代码
      this.$nextTick(function () {
        var timer = setInterval(() => {
          // 获取左右两侧的节点处理
          this.initBscroll()
          // 获取右侧每个分类的高度
          this.initHeight()
          clearInterval(timer)
        },2000)
      })
    },
    computed:{
      // 右侧滑动左边样式切换
      active: {
        get(){
            for(let i=0;i<this.heightList.length;i++){
              if( this.heightList[i+1] && this.heightList[i] < this.scrollY && this.heightList[i+1] > this.scrollY){
                return i;
              }
            }
            return 0;
        },
        set(){}

      }
    },
    methods:{
      async getCateData(){
        var {data} = await getCateData()
        this.cateList = data.data.cate
      },
      // 初始化
      initBscroll() {
        // let scroll =new BScroll()
        this.leftscroll = new BScroll(this.$refs.leftWrapper,{
          click:true,
          scrollY:true
        })
        this.rightscroll = new BScroll(this.$refs.rightWrapper,{
          click:true,
          scrollY:true,
          probeType:3
        })
        // 右侧滚动
        this.rightscroll.on('scroll',({y})=>{
          this.scrollY = Math.abs(y)
        })

      },
      // 获取右边分类高度
      initHeight() {
        const timer = setInterval(()=>{
          const item = this.$refs.rightWrapper.getElementsByClassName('cateItem')
          var height = 0;
          for(let i=0;i<item.length;i++){
            // console.log(item[i].clientHeight)
            height += item[i].clientHeight
            // 右侧分类高度
            this.heightList.push(height)
            // 获取右侧分类节点
            this.listDom.push(item[i])
          }
          item.length && clearInterval(timer)
        },1000)
      },
      // 第一种分类
      // async getCateData() {
      //   var {data} = await getCateData()
      //   console.log(data)
        // this.cateList = data.data.cate
        // var {data} = await getCateGoodsData('lk001')
        // this.goodsList = data.data.cate
      // },

      // async navOnclick(idx){
      //   let id = `lk00${idx}`
      //   const {data} = await getCateGoodsData(id)
      //   this.goodsList = data.data.cate
      //   this.active = idx-1
      // }

      // 分类左侧点击事件
      navClick(idx,e){
        // 判断是移动端
        if(!e._constructed){
          return
        }
        console.log(1111)
        // this.active = idx+1
        // console.log(this.active)
        // 点击左侧，右侧节点滑动
        this.rightscroll.scrollToElement(this.listDom[idx],500)
      },
    }
  }
</script>

<style scoped>
  .listWrapper {
      display: flex;
      position: absolute;
      top: 2.75rem;
      bottom: 3rem;
      width: 100%;
      overflow: auto;
  }

  .leftWrapper {
      background-color: #F4F4F4;
      width: 5.3125rem;
      flex: 0 0 5.3125rem;
      overflow: auto;

  }
  .categoryItem {
      padding: 0.75rem 0;
      border-bottom: solid 1px #E8E9E8;
      position: relative;
  }

  .categoryItem .textWrapper {
      line-height: 1.25rem;
      border-left: solid 0.1875rem transparent;
      padding: 0.3125rem 0.6875rem;
      font-size: 0.8125rem;
      color: #666666;
  }

  .categoryItem.selected {
      background: #FFF;
  }

  .categoryItem.selected .textWrapper {
      border-left-color: #3cb963;
      font-weight: bold;
      font-size: 0.875rem;
      color: #333333;
  }

  @media (min-width: 960px) {
      .wrapper {
          border-right: 1px solid #E8E9E8;
      }

      .wrapper .categoryItem {
          background: #fff;
      }
  }

  .listWrapper>.wrapper {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overflow-scrolling: touch;
  }

  .listWrapper>.wrapper {
      position: absolute;
      left: 5.3125rem;
      right: 0;
      bottom: 0;
      top: 0;
      background: #FFF;
  }
</style>
